<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>教师信息管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="stylesheet" href="/css/font.css">
        <link rel="stylesheet" href="/css/xadmin.css">
        <link rel="stylesheet" href="/css/myCustom.css">
	</head>

	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
				<a href="#">教师管理</a>
				<a>
					<cite>教师信息管理</cite></a>
			</span>
			<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);"
			 title="刷新">
				<i class="layui-icon" style="line-height:30px">ဂ</i></a>
		</div>

		<div class="x-body" id="app">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md3">
					<div class="layui-card">
						<xblock>
							院系列表
						</xblock>
						<ul id="majorTree">
							<li><a href="javascript:;" class="allMajor"><i class="layui-icon layui-tree-leaf"></i><cite>全部</cite></a></li>
						</ul>
					</div>
				</div>
				<div class="layui-col-md9">
					<xblock>
							<button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
							<button class="layui-btn" onclick="open_addTeacher()"><i class="layui-icon"></i>增加</button>
							<!-- <button class="layui-btn layui-btn-normal" onclick="open_inputFile()"><i class="iconfont">&#xe6ab;</i>导入</button>
							<a href="/sys/teacher/info/exportTeacher"><button class="layui-btn layui-btn-normal"><i class="iconfont">&#xe73f;</i>导出</button></a>  -->
							<span class="x-right" style="line-height:40px">共有数据：{{ pageInfo.total }} 条，当前{{ pageInfo.pageNum }} / {{ pageInfo.pages }}页</span>
							<form id="import_excel_form" enctype="multipart/form-data">
                                <input type="file" hidden="hidden" name="excelFile" id="importInput" onchange="import_excel(this)" accept=".xlsx"/>
                            </form>
					</xblock>
					<table class="layui-table">
						<thead>
							<tr>
								<th width="20">
									<div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
								</th>
								<th>教师编号</th>
								<th>姓名</th>
								<th width="30">性别</th>
								<th>院系</th>
								<th width="250">操作</th>
						</thead>
						<tbody>
							<tr v-for="teacher in teachers">
								<td>
									<div class="layui-unselect layui-form-checkbox" lay-skin="primary" :data-id='teacher.id' :data-TeacherName="teacher.teacherName"><i class="layui-icon">&#xe605;</i></div>
								</td>
								<td>{{ teacher.teacherNo }}</td>
								<td>{{ teacher.teacherName }}</td>
								<td v-if="teacher.teacherSex == 1">女</td>
                                <td v-else-if="teacher.teacherSex == 2">男</td>
								<template v-for="schOrg in schOrgs">
                                <td v-if="schOrg.id == teacher.orgId">{{ schOrg.orgName }}</td>
                                </template>
								<td class="td-manage">
									<button class="layui-btn layui-btn layui-btn-sm" onclick="open_editTeacher(this)"><i class="layui-icon">&#xe642;</i>编辑</button>
									<!-- <button class="layui-btn layui-btn layui-btn-sm" onclick="resetPassword(this)"><i class="layui-icon">&#xe642;</i>重置密码</button> -->
									<button class="layui-btn-danger layui-btn layui-btn-sm" onclick="member_del(this,'要删除的id')" href="javascript:;"><i
										 class="layui-icon">&#xe640;</i>删除</button>
								</td>
							</tr>
						</tbody>
					</table>
					<div class="page" style="margin-top: 10px !important;">
                         <div>
                           <a class="prev pageTxt" href="javascript:void(0)">上一页</a>
                           <a class="first pageTxt" href="javascript:void(0)">首页</a>
                           <template v-for="pageNum in pageInfo.navigatepageNums">
                               <a class="num" href="javascript:void(0)" v-if="pageInfo.pageNum != pageNum" :data="pageNum">{{ pageNum }}</a>
                               <span class="current" v-else :data="pageNum">{{ pageNum }}</span>
                           </template>
                           <a class="last pageTxt" href="javascript:void(0)">尾页</a>
                           <a class="next pageTxt" href="javascript:void(0)">下一页</a>
                         </div>
                   </div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="/js/jquery.min.js"></script>
        <script type="text/javascript" src="/js/xadmin.js"></script>
        <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="/js/vue.min.js"></script>
        <script type="text/javascript" src="/js/jquery.form.js"></script>
		<script>
			var vm = new Vue({
	            el : '#app',
	            data : {
	                // 院系列表
	                schOrgs : "",
	                pageInfo:"",
	                teachers: "",
	                // 当前选中的院系id
	                orgId: 0,
	                // 当前选中的院系名称
	                orgName: ""
	            },
	            created : function() {
	            	// 获取学校院系列表
                    this.listSchOrgWithTree();
	                // 获取教师列表(0:全部)
	                this.listTeacher(0, 1);
	            },
	            methods : {
	            	listSchOrgWithTree : function() {
                        var vm = this;
                        $.ajax({
                            url : "/sys/teacher/info/listSchOrgWithTree",
                            type : "get",
                            success : function(result) {
                                if (result.state) {
                                    var data = result.data;
                                    var schOrgTree = JSON.parse(data.listSchOrgWithTree);
                                    vm.schOrgs = data.listSchOrg;
                                    // 加载tree数据(放在其它地方会容易导致加载不出来tree数据)
                                    layui.use('tree', function() {
                                        layui.tree({
                                            elem: '#majorTree', //传入元素选择器
                                            nodes: schOrgTree,
                                            click: function(node) {
                                                // node即为当前点击的节点数据
                                                if (vm.orgId != node.id) {
                                                    vm.orgId = node.id;
                                                    vm.orgName = node.name;
                                                    vm.listTeacher(vm.orgId, 1);
                                                }
                                            }
                                        });
                                    });
                                } else {
                                    layui.use(['layer'], function(){
                                        var layer = layui.layer
                                        layer.msg(""+result.msg, {icon: 5});
                                    });
                                }
                            }
                        });
                    },
                    listTeacher: function(orgId, pageNum) {
	                    var vm = this;
	                    $.ajax({
	                        url : "/sys/teacher/info/listTeacher",
	                        data:{
	                        	orgId: orgId,
	                            pageNum: pageNum
	                        },
	                        type : "get",
	                        success : function(result) {
	                            if (result.state) {
	                                vm.pageInfo = result.data;
	                                vm.teachers = result.data.list;
	                            } else {
	                                layui.use(['layer'], function(){
	                                    var layer = layui.layer
	                                    layer.msg(""+result.msg, {icon: 5});
	                                });
	                            }
	                        }
	                    });
	                }
	            }
	        });

			$(function() {
                // 首次加载tree数据时,默认选中"全部"
                $("#majorTree li:first").addClass("selectColor");
            })

            // 对选中的当前树节点加背景颜色
            $("body").on("mousedown", ".layui-tree li a", function() {
                $(".layui-tree li, li a").removeClass("selectColor");
                if ($(this).hasClass("allMajor")) {
                    // 如果是“全部”，单独处理
                    $(this).parent("li").addClass("selectColor");
                    if (vm.orgId != 0) {
                        // 获取全部的教师列表
                        vm.listTeacher(0, 1);
                    }
                    vm.orgId = 0;
                } else {
                    $(this).addClass("selectColor");
                }
            })

			// 添加教师信息
			function open_addTeacher() {
				if (vm.orgId == 0) {
					layer.msg("请在左侧'院系列表'选择一个院系", {icon: 5});
                    return;
				}
				x_admin_show('添加教师【'+vm.orgName+'】','/sys/teacher/info/toAddTeacher?orgId=' + vm.orgId, 600, 430);
			}

			// 编辑教师信息
			function open_editTeacher(obj) {
				var teacherId = $(obj).parents("tr").find("div:first").attr("data-id");
				x_admin_show('编辑教师','/sys/teacher/info/toEditTeacher?teacherId=' + teacherId, 600, 430);
			}
			
			
			// 重置教师登录密码
			function resetPassword(obj) {
				var teacherId = $(obj).parents("tr").find("div:first").attr("data-id");
				layer.confirm('确认要重置该教师的登录密码吗？', function(index) {
                    $.ajax({
                         url : "/sys/teacher/info/resetPassword",
                         type : "post",
                         data : {
                             teacherId: teacherId
                         },
                         success : function(result) {
                             if (result.state) {
                                 layer.msg('重置登录密码成功!',{icon:1,time:1000});
                             } else {
                                 layer.msg(""+result.msg, {icon: 5});
                             }
                         }
                     });
               });
			}
			
			// 触发input文件上传
            function open_inputFile() {
                $("#importInput").click();
            }
            // 导入数据(excel格式)
            function import_excel(obj) {
                var file = $(obj).val();
                // 当所选文件不为空时
                if (file.length != 0) {
                    $("#import_excel_form").ajaxSubmit({
                            type:'post',
                            url:'/sys/teacher/info/importTeacher',
                            success:function(result){
                                if (result.state) {
                                    layer.msg("导入数据成功", {icon: 1},function(){
                                        // 刷新页面
                                        location.reload();
                                    });
                                } else {
                                    layer.msg(""+result.msg, {icon: 5});
                                }
                                // 重置input中的文件
                                document.getElementById("import_excel_form").reset();
                            }
                    });
                }
            }
		
			/*单个删除*/
			function member_del(obj, id) {
				var teacherName = $(obj).parents("tr").find("div:first").attr("data-teacherName");
                var id = $(obj).parents("tr").find("div:first").attr("data-id");
                var teacherId = [];
                teacherId.push(id);
                layer.confirm('确认要删除【'+teacherName+'】吗？', function(index) {
                     $.ajax({
                          url : "/sys/teacher/info/delTeacher",
                          type : "post",
                          data : {
                        	  teacherId: teacherId
                          },
                          success : function(result) {
                              if (result.state) {
                                  layer.msg('删除成功!',{icon:1,time:1000});
                                  // 根据当前页面数据量决定加载前一页还是当前页
                                  if (vm.pageInfo.size - 1 == 0 && vm.pageInfo.pageNum != 1) {
                                      vm.listTeacher(vm.orgId, vm.pageInfo.pageNum - 1);
                                  } else {
                                      vm.listTeacher(vm.orgId, vm.pageInfo.pageNum);
                                  }
                              } else {
                                  layer.msg(""+result.msg, {icon: 5});
                              }
                          }
                      });
                });
			}

			function delAll(argument) {
				var teacherId = tableCheck.getData();
                if (teacherId.length <= 0) {
                    return;
                }
                // 获取选中的教师名称
                var obj = $(".layui-form-checked").not('.header');
                var teacherName=[];
                obj.each(function(index, el) {
                	teacherName.push(obj.eq(index).attr('data-teacherName'));
                });
                layer.confirm('确认要删除【'+teacherName+'】吗？', function(index) {
                    $.ajax({
                        url : "/sys/teacher/info/delTeacher",
                        type : "post",
                        data : {
                        	teacherId: teacherId
                        },
                        success : function(result) {
                            if (result.state) {
                                layer.msg('删除成功', {icon: 1});
                                // 移除所有checkbox的勾选状态
                                $(".layui-form-checkbox").removeClass('layui-form-checked');
                                
                                // 根据当前页面数据量决定加载前一页还是当前页
                                if (vm.pageInfo.size - teacherId.length == 0 && vm.pageInfo.pageNum != 1) {
                                    vm.listTeacher(vm.orgId, vm.pageInfo.pageNum - 1);
                                } else {
                                    vm.listTeacher(vm.orgId, vm.pageInfo.pageNum);
                                }
                            } else {
                                layer.msg(""+result.msg, {icon: 5});
                            }
                        }
                    });
                });
			}
			
			// 点击页码数，进行跳转
            $(".page").delegate(".num", "click", function() {
                var pageNum = $(this).attr("data");
                vm.listTeacher(vm.orgId, pageNum);
            });
            // 上一页
            $(".page").delegate(".prev", "click", function() {
                if (vm.pageInfo.hasPreviousPage) {
                    vm.listTeacher(vm.orgId, vm.pageInfo.pageNum - 1);
                }
            });
            // 下一页
            $(".page").delegate(".next", "click", function() {
                if (vm.pageInfo.hasNextPage) {
                    vm.listTeacher(vm.orgId, vm.pageInfo.pageNum + 1);
                }
            });
            // 首页
            $(".page").delegate(".first", "click", function() {
                if (!vm.pageInfo.isFirstPage) {
                    vm.listTeacher(vm.orgId, 1);
                }
            });
            // 尾页
            $(".page").delegate(".last", "click", function() {
                if (!vm.pageInfo.isLastPage) {
                    vm.listTeacher(vm.orgId, vm.pageInfo.pages);
                }
            });
            
            // 保存后回调函数
            function updateSaveData() {
            	vm.listTeacher(vm.orgId, 1);
            }
            // 编辑后回调函数
            function updateEditData() {
            	vm.listTeacher(vm.orgId, vm.pageInfo.pageNum);
            }
		</script>
	</body>

</html>
